<template>
	<view>
		<view class="create">
			<u-picker v-model="showUrgency" @confirm="confirmUrgentRank" mode="selector" :default-selector="[urgentrankIndex]" range-key="name" :range="urgentrank"></u-picker>
			<u-form :model="form" :labelStyle="{fontSize: '30rpx'}" label-width="auto" label-position="top" ref="uForm" class="create-form">
				<form-field :form.sync="form" :formFile="formFile" :fields.sync="fields" v-on:clearError="clearError"></form-field>
				<u-form-item label="紧急程度">
					<view @click="showUrgency = true" v-if="urgentrank.length">
						<view class="urgency-name">{{urgentrank[urgentrankIndex].name}}</view>
						<view class="form-item-tis">{{urgentrank[urgentrankIndex].desc}}</view>
					</view>
				</u-form-item>
				<u-button @click="submit" :loading="formButtonStatus" :custom-style="formButtonStyle" shape="square" :hair-line="false" :ripple="true" :disabled="formButtonStatus" ripple-bg-color="rgba(45,211,232, 0.8)">
					提交
				</u-button>
			</u-form>
		</view>
	</view>
</template>

<script>
	import Common from "../../common/common.js";
	export default {
		data() {
			return {
				form: {},
				formFile: {},
				rules: {},
				category: 0,
				fields: [],
				urgentrank: [],
				urgentrankIndex: 0,
				formButtonStatus: false,
				formButtonStyle: {
					backgroundImage: "linear-gradient(to bottom right, #34E4E8, #1FAEE8)",
					border: 'none',
					color: '#ffffff',
					outline: 'none',
					margin: '60rpx 80rpx 60rpx 80rpx'
				},
				showUrgency: false
			}
		},
		onLoad(query) {
			var that = this, userinfo = uni.getStorageSync('userinfo');
			that.category = query.category ? query.category:0
			that.$u.api.createGet({
				category: that.category
			}).then(res => {
				if (res.code == 1) {
					that.fields = res.data.fields
					that.urgentrank = res.data.urgentrank
					uni.setNavigationBarTitle({
						title: res.data.categoryName + '-提交工单'
					})
					
					// 组装form的value和rules参数
					for (let f in res.data.fields) {
						if (res.data.fields[f].type_list == 'file' || res.data.fields[f].type_list == 'files') {
							that.$set(that.formFile, res.data.fields[f].name, [])
						} else if (res.data.fields[f].type_list == 'switch') {
							res.data.fields[f].value = parseInt(res.data.fields[f].value) ? true:false
						} else if (res.data.fields[f].type_list == 'checkbox') {
							let vlist = [], selected = res.data.fields[f].value.split(',')
							for (let c in res.data.fields[f].values_list) {
								vlist.push({
									name: c,
									checked: selected.includes(c),
									label: res.data.fields[f].values_list[c]
								})
							}
							res.data.fields[f].values_list = vlist
						}
						
						that.$set(that.form, res.data.fields[f].name, res.data.fields[f].value)
						if (res.data.fields[f].unirule) {
							that.$set(that.rules, res.data.fields[f].name, Common.buildRule(res.data.fields[f].unirule, res.data.fields[f].title, res.data.fields[f].errormsg))
						}
					}
					that.$refs.uForm.setRules(that.rules);
				} else {
					that.$u.toast(res.msg)
				}
			}).catch(res => {
				console.log(res)
				that.$u.toast('请求失败，请重试！');
			})
		},
		methods: {
			confirmUrgentRank: function (value) {
				this.urgentrankIndex = value[0]
			},
			clearError: function (name, type = 'none') {
				setTimeout(() => {
					if (type == 'none') {
						this.$refs.uForm.validateField(name)
					} else {
						this.$refs.uForm.validate(valid => {
							uni.hideToast()
						})
					}
				}, 50)
			},
			submit: function () {
				var that = this, formV = JSON.parse(JSON.stringify(that.form));
				that.$refs.uForm.validate(valid => {
					if (valid) {
						that.formButtonStatus = true
						formV.category = that.category
						formV.urgency = that.urgentrank[that.urgentrankIndex]['id']
						for (let f in that.fields) {
							if (that.fields[f].type_list == 'switch') {
								formV[that.fields[f].name] = formV[that.fields[f].name] ? '1':'0';
							}
						}
						that.$u.api.createPost(formV).then(res => {
							that.formButtonStatus = false
							uni.showModal({
								title: '温馨提示',
								content: res.msg,
								showCancel: false,
								success: data => {
									if (res.code == 1) {
										uni.reLaunch({
											url: '/pages/index/index?order_id=' + res.data.order_id
										})
									}
								}
							})
						}).catch(res => {
							that.formButtonStatus = false
							that.$u.toast('请求失败，请重试！');
						})
					}
				})
			}
		}
	}
</script>

<style>
.create-form {
	display: block;
	width: 92vw;
	margin: 0 auto;
}
.urgency-name {
	font-weight: bold;
	height: 40rpx;
	line-height: 40rpx;
}
.form-item-tis {
	color: #999999;
	font-size: 25rpx;
	height: 30rpx;
	line-height: 30rpx;
}
</style>
